import styled from "@emotion/styled";
import React, { CSSProperties } from "react";

// 外部容器组件：主要用于包裹线条，方便设置外部样式，如边距、定位等
const Container = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
`

/**
 * Line 是一个绝对定位的伪元素模拟的“装饰性横线”组件。
 * 通过 ::before 渲染实际横线，不影响布局流。
 */
const Line = styled.div<{ width: number; color?: string; height: number }>`
    position: relative; // 作为 ::before 的定位参考容器
    width: ${({ width }) => `${width}rem`}; // 设置可视宽度
    height: ${({ height }) => `${height}rem`}; // 设置可视高度
    display: flex;
    justify-content: center;
    align-items: center;

    &::before {
        content: "";
        position: absolute; // 完全覆盖 Line 的区域
        top: 0;
        left: 0;
        width: ${({ width }) => `${width}rem`};
        height: ${({ height }) => `${height}rem`};
        background: ${({ color }) => color || "#000"}; // 默认为黑色
    }
`

/**
 * @interface DecorativeLineProps
 * @property width - 横线宽度，单位 rem
 * @property height - 横线高度，单位 rem
 * @property color - 可选，横线颜色，默认黑色 支持使用渐变背景色
 * @property className - 可选，自定义类名，便于使用 styled-components 或 css module 扩展样式
 * @property containerStyle - 可选，容器样式，用于控制外层布局行为
 * @property lineStyle - 可选，横线自身样式，用于精细化控制 Line 样式（例如透明度、阴影等）
 */
interface DecorativeLineProps {
    width: number
    color?: string
    height: number
    className?: string
    containerStyle?: CSSProperties
    lineStyle?: CSSProperties
}

/**
 * DecorativeLine 是一个“装饰性横线”组件，不影响文档流布局（不占据空间）。
 * 可用于页面装饰、卡片分隔、标题下划线等视觉增强场景。
 *
 * 使用方式：
 * <DecorativeLine width={100} height={2} color="#eaeaea" />
 */
export const DecorativeLine: React.FC<DecorativeLineProps> = ({
    width,
    color,
    height,
    className,
    lineStyle = {},
    containerStyle = {},
}) => {
    return (
        <Container style={containerStyle}>
            <Line
                width={width}
                color={color}
                height={height}
                className={className}
                style={lineStyle}
            />
        </Container>
    )
}
